<div class="transaction-table-directive">
	<div class="transaction-table-directive_wrapper">
        <div class="transaction-table-directive_header"></div>
        <table class="transaction-table-directive_table table table-condensed table-hover" cellspacing="0">
            <thead>
            <tr>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('index')"># <span
                            ng-show="transactionOrderBy == 'index'" class="glyphicon"
                            ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('startTime')">Start Time <span
                            ng-show="transactionOrderBy == 'startTime'" class="glyphicon"
                            ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('application')">Path
                        <span ng-show="transactionOrderBy == 'application'"  class="glyphicon"
                           ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('elapsed')">Res. (ms)
                        <span ng-show="transactionOrderBy == 'elapsed'" class="glyphicon"
                           ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('exception')">Exception <span
                            ng-show="transactionOrderBy == 'exception'" class="glyphicon"
                            ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('agentId')">Agent <span
                            ng-show="transactionOrderBy == 'agentId'" class="glyphicon"
                            ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('remoteAddr')">Client IP <span
                            ng-show="transactionOrderBy == 'remoteAddr'" class="glyphicon"
                            ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span></div>
                </th>
                <th>
                    <div class="th-inner" ng-click="transactionOrder('transactionSequence')">
                        Transaction <span ng-show="transactionOrderBy == 'transactionSequence'" class="glyphicon"
                                   ng-class="{true: 'glyphicon-arrow-down', false: 'glyphicon-arrow-up'}[transactionReverse]"></span>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody style="overflow: auto;height:100%">
                <tr ng-repeat="transaction in transactionList | orderBy:transactionOrderBy:transactionReverse"
                    ng-class="{true: 'success', false: {'danger': transaction.exception}}[transaction == currentTransaction]">
                    <td style="text-align:right;">
						<a href ng-href="transactionInfo.pinpoint?traceId={{transaction.traceId}}&focusTimestamp={{transaction.collectorAcceptTime}}" target="_blank"></a>
						{{transaction.index | number}}
                    </td>
                    <td ng-click="traceByApplication(transaction)" sorttable_customkey="{{transaction.startTime}}">{{formatDate( transaction.startTime )}}</td>
                    <td ng-click="traceByApplication(transaction)">
                        {{transaction.application}}
                        <a ng-click="openTransactionView(transaction);$event.stopPropagation()" target="_blank" title="Open Mixed View in New Window" data-toggle="tooltip" data-placement="right"><span class="glyphicon glyphicon-list-alt"></span></a>
                    <td ng-click="traceByApplication(transaction)" style="padding-right:15px;text-align:right">{{transaction.elapsed | number}}</td>
                    <td ng-click="traceByApplication(transaction)" style="text-align:center;"><span class="glyphicon glyphicon-fire" ng-show="transaction.exception == 1"></span></td>
                    <td ng-click="traceByApplication(transaction)">{{transaction.agentId}}</td>
                    <td ng-click="traceByApplication(transaction)">{{transaction.remoteAddr}}</td>
                    <td ng-click="traceByApplication(transaction)">{{transaction.traceId}} <a ng-if="transaction.logPageUrl" class="btn btn-default btn-xs" href="{{transaction.logPageUrl}}" target="_blank">{{transaction.logButtonName}}</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>